import { Component, Ref } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Button, Carousel, Steps } from 'ant-design-vue'
import BasicInfoView, { type BasicInfoDataDto } from './components/BasicInfo'
import InsurancePriceView, { type InsurancePriceDataDto } from './components/InsurancePrice'
import SupplementaryInfo, { type SupplementaryInfoDataDto } from './components/SupplementaryInfo'
import DialogPreview from './components/DialogPreview'
import type { InsureEnsurePlanDto } from '@/api/insureEnsurePlan/types'
import { divide } from 'lodash'

export type InsureEnsureFormData = {
    basicInfoView: BasicInfoDataDto
    insurancePriceView: InsurancePriceDataDto
    supplementaryInfo: SupplementaryInfoDataDto
}

@Component
export class CreateInsuranceView extends Render {
    @Ref() carouselRef!: typeof Carousel
    @Ref() basicInfoViewRef!: typeof BasicInfoView
    @Ref() insurancePriceViewRef!: typeof InsurancePriceView
    @Ref() supplementaryInfoRef!: typeof SupplementaryInfo

    stepsIndex = 0
    showPreview = false

    formData = {} as InsureEnsureFormData

    onPrev() {
        this.carouselRef.prev()
        if (this.stepsIndex > 0) {
            this.stepsIndex--
        }
    }

    async toNext() {
        console.log(8888, this.carouselRef)
        if (this.stepsIndex < 3) {
            const refMap = {
                0: {
                    ref: this.basicInfoViewRef,
                    prop: 'basicInfoView'
                },
                1: {
                    ref: this.insurancePriceViewRef,
                    prop: 'insurancePriceView'
                },
                2: {
                    ref: this.supplementaryInfoRef,
                    prop: 'supplementaryInfo'
                }
            }
            this.formData[refMap[this.stepsIndex as keyof typeof refMap].prop as keyof typeof this.formData] =
                await refMap[this.stepsIndex as keyof typeof refMap].ref.submit()

            console.log('res', this.formData)
        }
        this.carouselRef.next()
        this.stepsIndex++
        if (this.stepsIndex === 3) {
            this.onShowPreview()
        }
    }

    onShowPreview() {
        this.showPreview = true
    }

    // 重置
    onReset() {
        this.basicInfoViewRef.reset()
        this.insurancePriceViewRef.reset()
        this.supplementaryInfoRef.reset()
        this.stepsIndex = 0
        this.carouselRef.goTo(0, true)
    }

    render() {
        return (
            <div class="flex items-center flex-col h-full ">
                <div class="flex-none w-160">
                    <Steps
                        current={this.stepsIndex}
                        type="navigation"
                        size="small"
                        items={[
                            {
                                title: '基础信息'
                            },
                            {
                                title: '保费价格'
                            },
                            {
                                title: '补充资料'
                            }
                        ]}
                    ></Steps>
                </div>
                <div class="flex-none w-full h-0.5 bg-[#F4F4F7]"></div>
                <div class="flex-1 w-160 pt-24">
                    {
                        <Carousel
                            ref="carouselRef"
                            infinite={false}
                            dots={false}
                            v-slots={{
                                default: () => {
                                    return (
                                        <>
                                            <div>
                                                <BasicInfoView ref="basicInfoViewRef" />
                                            </div>
                                            <div>
                                                <InsurancePriceView ref="insurancePriceViewRef" />
                                            </div>
                                            <div>
                                                <SupplementaryInfo ref="supplementaryInfoRef" />
                                            </div>
                                        </>
                                    )
                                }
                            }}
                        ></Carousel>
                    }

                </div>

                <DialogPreview v-model:show={this.showPreview} formData={this.formData} onReset={this.onReset}/>

                <div class="flex items-center flex-none pb-20">
                    {/* <div class="text-blue-100 text-base mr-12 cursor-pointer">保存并返回</div> */}
                    {this.stepsIndex < 4 ? (
                        <Button class="mr-12" onClick={this.onPrev}>
                            上一步
                        </Button>
                    ) : (
                        <></>
                    )}
                    {this.stepsIndex < 2 ? (
                        <Button class="mr-12" type="primary" onClick={this.toNext}>
                            下一步
                        </Button>
                    ) : (
                        <></>
                    )}
                    {this.stepsIndex === 2 ? (
                        <Button
                            class="mr-12"
                            type="primary"
                            onClick={this.toNext}
                        >
                            预览
                        </Button>
                    ) : (
                        <></>
                    )}
                    {this.stepsIndex === 3 ? (
                        <div class="flex items-center">
                            <Button class="mr-12">继续添加</Button>
                            <Button class="mr-12" type="primary">
                                完成并返回
                            </Button>
                        </div>
                    ) : (
                        <></>
                    )}
                </div>
            </div>
        )
    }
}

export default toNative<{}, {}>(CreateInsuranceView)
